<template>
  <el-dialog
    :title="props.data.type === 2 ? '修改政策' : '新增政策'"
    v-model="dialogVisible"
    width="520px"
    @close="handleClose"
    align-center
    center
    :append-to-body="true"
    :close-on-click-modal="false"
    class="customer-dialog">
    <div class="dialog-content">
      <el-form
        :inline="true"
        :model="form"
        label-position="top">
        <el-form-item label="代理层级">
          <el-select
            v-model="form.level"
            placeholder="请选择">
            <el-option
              label="一代"
              :value="1" />
            <el-option
              label="二代"
              :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="等级名称">
          <el-input
            v-model="form.levelName"
            placeholder="请输入" />
        </el-form-item>
        <el-form-item label="充值阶梯（万元）">
          <el-input
            v-model="form.stepName"
            placeholder="请输入" />
        </el-form-item>
        <el-form-item label="预设折扣（默认为1）">
          <el-input
            v-model="form.discountRatio"
            placeholder="请输入" />
        </el-form-item>
        <!-- <el-form-item label="预设激励（默认为0）">
          <el-input
            v-model="form.incentiveRatio"
            placeholder="请输入" />
        </el-form-item> -->
        <el-form-item label="">
          <el-input style="opacity: 0" />
        </el-form-item>
        <el-form-item :label="`输入手机号为 ${userStore.user.mobile} 的验证码`">
          <el-input
            v-model="form.smsCode"
            placeholder="请输入" />
          <el-button
            type="primary"
            plain
            @click="getCode">
            获取验证码
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button
          type="primary"
          @click="confirmFn">
          保存
        </el-button>
        <el-button @click="cancelFn">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
  import { ElMessage } from 'element-plus';
  import { savePolicySetting, updatePolicySetting, sendUpdateVerifyCode } from '@/api/index';
  import { useUserStore } from '@/stores/user';
  const userStore = useUserStore();

  const props = defineProps({
    show: {
      type: Boolean,
      required: true
    },
    data: {
      type: Object,
      required: true
    }
  });

  const emit = defineEmits(['update:show', 'updateList']);

  const dialogVisible = computed({
    get() {
      return props.show;
    },
    set() {
      emit('update:show', false);
    }
  });

  let form = ref({
    level: '',
    levelName: '',
    stepName: '',
    discountRatio: 1,
    incentiveRatio: 0,
    smsCode: ''
  });

  function getCode() {
    sendUpdateVerifyCode({
      mobile: userStore.user.mobile
    }).then(res => {
      ElMessage.success('验证码已发送');
    });
  }

  // 关闭
  function handleClose() {
    emit('update:show', false);
  }

  // 确认
  function confirmFn() {
    const { level, levelName, stepName, discountRatio, incentiveRatio, smsCode } = form.value;

    if (smsCode === '') {
      ElMessage.error('请输入验证码');
      return;
    }

    if (props.data.type === 1) {
      //新增
      savePolicySetting({
        level,
        levelName,
        stepName,
        discountRatio,
        incentiveRatio,
        smsCode
      }).then(res => {
        ElMessage.success('保存成功');
        emit('updateList');
        handleClose();
      });
    } else {
      //修改
      updatePolicySetting({
        id: props.data.id,
        level,
        levelName,
        stepName,
        discountRatio,
        incentiveRatio,
        smsCode
      }).then(res => {
        ElMessage.success('修改成功');
        emit('updateList');
        handleClose();
      });
    }
  }

  // 取消
  function cancelFn() {
    emit('update:show', false);
  }

  onMounted(() => {
    if (props.data.type === 2) {
      const { level, levelName, stepName, discountRatio, incentiveRatio } = props.data.info;

      form.value = {
        level,
        levelName,
        stepName,
        discountRatio,
        incentiveRatio,
        smsCode: ''
      };
    }
  });
</script>

<style lang="scss" scoped>
  .el-form {
    .el-input {
      width: 200px;
    }

    .el-select {
      width: 200px;
    }

    .el-button {
      margin-left: 10px;
    }
  }
</style>
